<template>
	<div class="wrapper">
		<!-- 用户信息部分 -->
		<div class="user-info">
			<i class="user-icon">👤</i>
			<span>{{ user.userName }}</span>
		</div>

		<!-- 红包栏 -->
		<div class="section">
			<div class="section-title">红包栏</div>
			<div class="grid-container">
				<div class="grid-item">
					<i>🎁</i>
					<p>红包</p>
				</div>
				<div class="grid-item">
					<i>💼</i>
					<p>卡包</p>
				</div>
				<div class="grid-item">
					<i>📦</i>
					<p>券包</p>
				</div>
				<div class="grid-item">
					<i>🔑</i>
					<p>超级吃货卡</p>
				</div>
			</div>
		</div>

		<hr> <!-- 分割线 -->

		<!-- 钱包栏 -->
		<div class="section">
			<div class="section-title">我的钱包</div>
			<div class="grid-container">
				<div class="grid-item">
					<p class="amount">19.6万</p>
					<p>借钱</p>
				</div>
				<div class="grid-item">
					<p class="amount">420元</p>
					<p>外卖红包</p>
				</div>
				<div class="grid-item">
					<p class="amount">18.7万</p>
					<p>借钱精选</p>
				</div>
				<div class="grid-item">
					<p class="amount">1笔</p>
					<p>现金奖励</p>
				</div>
			</div>
		</div>

		<hr> <!-- 分割线 -->

		<!-- 更多功能栏 -->
		<div class="section">
			<div class="section-title">更多功能</div>
			<div class="grid-container">
				<div class="grid-item">
					<i>📍</i>
					<p>我的地址</p>
				</div>
				<div class="grid-item">
					<i>❤️</i>
					<p>店铺关注</p>
				</div>
				<div class="grid-item">
					<i>📦</i>
					<p>邀友跑单</p>
				</div>
				<div class="grid-item">
					<i>💳</i>
					<p>我的账单</p>
				</div>
			</div>
		</div>

		<hr> <!-- 分割线 -->

		<!-- 管理密码与退出登录 -->
		<div class="account-management">
			<button class="manage-password" @click="tochange">管理用户信息</button>
			<button class="logout" @click="logout">退出登录</button>
			<button class="blogout" @click="tologin">商家登录</button>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'mine',
		data() {
			return {
				user: {} // 存储用户信息
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
		},
		components: {
			Footer
		},
		methods: {
			tologin() {
				this.$router.push({
					path: '/businessLogin'
				});
			},
			tochange() {
				this.$router.push({
					path: '/changepassword'
				});
			},
			logout() {
				// 清除 localStorage 或 sessionStorage 中的用户数据
				sessionStorage.removeItem('user');

				alert('已退出登录');

				// 重定向到登录页面
				this.$router.push({
					path: '/login'
				});
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		font-size: 18px;
	}

	.user-icon {
		font-size: 40px;
		margin-right: 10px;
		color: #409eff;
	}

	.section {
		margin-bottom: 20px;
	}

	.section-title {
		margin-left: 5vw;
		font-size: 18px;
		color: #333;
		margin-bottom: 15px;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		justify-items: center;
		align-items: center;
	}

	.grid-item {
		text-align: center;
	}

	.grid-item i {
		font-size: 30px;
		margin-bottom: 8px;
	}

	.grid-item p {
		font-size: 14px;
		color: #555;
	}

	.amount {
		font-size: 20px;
		font-weight: bold;
		color: #409eff;
	}

	/* 分割线 */
	hr {
		border: none;
		height: 1px;
		background-color: #e0e0e0;
		margin: 20px 0;
	}

	/* 退出登录与管理密码按钮 */
	.account-management {
		text-align: center;
		margin-top: 20px;
		padding-bottom: 14vw;
	}

	button {
		padding: 10px 20px;
		margin: 10px;
		font-size: 16px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		padding-bottom: 14vw;
		/* 确保底部内容不被菜单栏遮挡 */
	}

	.manage-password {
		background-color: #409eff;
		color: white;
	}

	.logout {
		background-color: #00ff7f;
		color: white;
	}

	.blogout {
		background-color: #00aaff;
		color: white;
	}

	button:hover {
		opacity: 0.9;
	}
</style>